<template>
  <MyVanskeleton :row="3" :loading="loading">
    <template v-slot:my-content>
      <div class="person-style">
        <!-- 标题栏 -->
        <van-nav-bar
          :title="companyName"
          left-arrow
          @click-left="onBack"
          @click-right="toIMReport(companyid, 'P', companyName)"
          right-text="举报"
        />

        <!-- 窗口 -->
        <div class="note-window">
          <!-- 防骗 -->
          <div class="caution" v-if="showTip">
            <span>网上聊天谨防上当受骗，进一步沟通以面试或电话为准</span>
            <van-icon
              name="clear"
              size="16"
              color="#fff"
              @click="showTip = false"
            />
          </div>

          <!-- 对话 -->
          <div
            class="dialog"
            :class="{ admin: isFromAdmin }"
            ref="middle"
            @click="(show_changyongyu = false), (show_more = false)"
          >
            <div v-for="(item, index) in list" :key="index">
              <!-- 个人 -->
              <div v-if="item.isFromPerson" @click="onItemClick(item, index)">
                <div class="info person">
                  <img
                    class="avatar"
                    :src="personLogo"
                    width="40"
                    height="40"
                  />

                  <!-- 附件简历 -->
                  <div class="annex" v-if="false">
                    <p>
                      <span>我的附件简历</span>
                      <span>128k</span>
                      <!--这里是附件存储大小-->
                    </p>
                    <p>
                      <span>点击预览附件简历</span>
                    </p>
                  </div>

                  <div
                    class="bubble"
                    v-if="item.msg.indexOf('/upload/IMImage/') >= 0"
                  >
                    <img :src="item.msg" alt="" @click="onImgClick(item.msg)" />
                  </div>
                  <div class="bubble" v-else>
                    <span>{{ item.msg }}</span>
                  </div>
                  <div class="sub">
                    <span class="time">{{ item.dateStr }}</span>
                    <!-- <span class="state" :class="{ no: item.ToIsRead != 1 }">{{item.ToIsRead === 1 ? "已读" : "未读"}}</span> -->
                  </div>
                </div>
              </div>

              <!-- 企业 -->
              <div @click="onItemClick(item, index)" v-if="item.isFromCompany">
                <div class="info firm">
                  <img
                    @click="onCompanyClick(item.fromUserID)"
                    class="avatar"
                    :src="item.fromUserLogo"
                    alt=""
                  />
                  <!-- <div class="bubble">
                  <span>{{ item.MessageText }}</span>
                </div> -->
                  <div
                    class="bubble"
                    v-if="item.msg.indexOf('/upload/IMImage/') >= 0"
                  >
                    <img :src="item.msg" alt="" @click="onImgClick(item.msg)" />
                  </div>
                  <div class="bubble" v-else>
                    <span>{{ item.msg }}</span>
                  </div>
                  <div class="sub">
                    <span class="time">{{ item.dateStr }}</span>
                  </div>
                </div>
              </div>

              <!-- 系统 -->
              <div @click="onItemClick(item, index)" v-if="item.isFromAdmin">
                <div
                  :class="{
                    info: true,
                    person: item.toUserType == 'C',
                    firm: item.toUserType == 'P',
                  }"
                >
                  <img class="avatar" :src="item.fromUserLogo" alt="" />
                  <div class="bubble">
                    <span>{{ item.msg }}</span>
                  </div>
                  <div class="sub">
                    <span class="time">{{ item.dateStr }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 底部 -->
          <div class="bottom" v-if="companyid != 'admin'">
            <!-- 内容输入 -->
            <div class="input">
              <p>
                <i
                  class="icon-useful"
                  @click="
                    (show_changyongyu = !show_changyongyu),
                      (show_more = false),
                      (show_changyongyu_setbtn = false)
                  "
                >
                </i>
              </p>
              <p>
                <van-field
                  v-model="message"
                  rows="1"
                  :autosize="{ maxHeight: 120, minHeight: 24 }"
                  type="textarea"
                  placeholder="新消息"
                  class="textarea"
                  @focus="(show_changyongyu = false), (show_more = false)"
                />
              </p>
              <p v-if="message === ''">
                <i
                  class="icon-more"
                  @click="(show_more = true), (show_changyongyu = false)"
                  v-if="show_more === false"
                ></i>
                <i
                  class="icon-cancel"
                  @click="show_more = false"
                  v-if="show_more === true"
                ></i>
              </p>
              <p v-else>
                <van-button
                  color="#05A6F0"
                  type="primary"
                  text="发送"
                  style="
                    height: 40px;
                    padding: 0 12px;
                    border: 0;
                    border-radius: 6px;
                    font-size: 16px;
                    line-height: 36px;
                  "
                  :loading="loading_sendMessage"
                  @click="sendMessage"
                ></van-button>
              </p>
            </div>

            <!-- 常用语 start -->
            <div class="useful" v-if="show_changyongyu">
              <ul class="useful-setting">
                <li
                  v-for="(item, index) in select_changyongyu_data"
                  :key="index"
                  @click="onChangyongyuItemClick(item)"
                >
                  <span>{{ item }}</span>
                  <template v-if="isEdit_changyongyu === true">
                    <van-icon
                      name="edit"
                      color="#888"
                      @click.stop="onChangyongyuItemEditClick(item, index)"
                    />
                    <van-icon
                      name="delete-o"
                      color="#888"
                      @click.stop="onChangyongyuItemDelClick(index)"
                    />
                  </template>
                </li>
              </ul>
              <p>
                <span
                  @click="
                    (show_changyongyu_edit = true), (isEdit_changyongyu = false)
                  "
                  >添加</span
                >
                <span @click="isEdit_changyongyu = !isEdit_changyongyu">{{
                  isEdit_changyongyu === false ? "修改" : "取消"
                }}</span>
              </p>
            </div>

            <!-- 更多方式 -->
            <div v-if="show_more" class="more">
              <ul>
                <li @click="sendIMG">
                  <img src="@/assets/img/note/pic_icon.png" />
                  <span>图片</span>
                </li>
                <li>
                  <img src="@/assets/img/note/file_icon.png" />
                  <span>附件简历</span>
                </li>
              </ul>
            </div>
          </div>
        </div>

        <!-- 常用语编辑 -->
        <van-popup
          v-model="show_changyongyu_edit"
          closeable
          class="note-input-useful-edit"
        >
          <b>添加常用语</b>
          <p>
            <van-field
              v-model="changyongyu"
              rows="5"
              autosize
              show-word-limit
              type="textarea"
              placeholder="输入您的常用回复"
              class="text"
              maxlength="50"
            />
          </p>
          <p>
            <van-button
              round
              type="primary"
              text="保存"
              class="btn"
              @click="onChangyongyuSave"
            ></van-button>
            <van-button
              round
              type="primary"
              text="发送"
              class="btn"
              @click="onChangyongyuSend"
            ></van-button>
          </p>
        </van-popup>
      </div>
    </template>
  </MyVanskeleton>
</template>

<script>
import Global from "@/Global";
import MyVanskeleton from "@/components/MyVanskeleton.vue";
import { NavBar, Toast, Icon, Field, Button, Popup, ImagePreview } from "vant";
import {
  getPersonID,
  getPersonChangYongYu,
  addPersonChangYongYu,
} from "@/util/session";
import { mixin_person_toJobCompany, mixin_common } from "@/mixin/mixins";
import { returnToPhoneWithData } from "@/util/phone";
export default {
  name: "IMMessage",
  components: {
    [NavBar.name]: NavBar,
    MyVanskeleton,
    [Icon.name]: Icon,
    [Field.name]: Field,
    [Button.name]: Button,
    [Popup.name]: Popup,
  },
  props: ["title", "companyid"],
  mixins: [mixin_person_toJobCompany, mixin_common],
  // 定义属性
  data() {
    return {
      loading: false,
      cid: this.$route.query.cid,
      companyID: this.$route.query.companyID,
      isFromAdmin: this.$route.query.isFromAdmin,
      companyLogo: "",
      companyName: "",
      personLogo: "",
      sex: "",
      list: [],
      showTip: true,
      personid: getPersonID(),

      message: "",
      loading_sendMessage: false,

      show_changyongyu: false,
      select_changyongyu_data: getPersonChangYongYu(),
      isEdit_changyongyu: false, //常用语编辑模式
      show_changyongyu_edit: false,
      index_changyongyu_edit: -1,
      changyongyu: "",

      show_more: false,
    };
  },
  mounted() {
    this.onLoad();
    //收到消息
    this.$bus.$on(Global.bus_pereson_im_message_receive_InsidePage, () => {
      this.onLoad();
    });
  },
  beforeDestroy() {
    this.$bus.$off(Global.bus_pereson_im_message_receive_InsidePage);
  },
  watch: {
    select_changyongyu_data() {
      addPersonChangYongYu(this.select_changyongyu_data);
    },
  },
  // 方法集合
  methods: {
    onLoad() {
      this.$api
        .get("/PersonIM/GetPersonMessageList", { cid: this.cid })
        .then((res) => {
          if (res.success) {
            this.loading = false;
            let data = res.response;
            this.list = data.messageList;
            this.companyLogo = data.companyLogo;
            this.companyName = data.companyName;
            this.personLogo = data.personLogo;
            this.sex = data.sex;
            this.$nextTick(() => {
              let middle = this.$refs["middle"];
              if (middle) {
                // console.log(middle.scrollHeight);
                middle.scrollTop = middle.scrollHeight;
              }
            });
            //已读聊天详情页
            this.$bus.$emit(Global.bus_person_im_message_read);
          }
        });
    },
    //预览图片
    onImgClick(url) {
      ImagePreview([url]);
    },
    onItemClick(item, index) {
      if (item.FromUserID === "admin") {
        if (item.MessageText.indexOf("匿名八卦") >= 0) {
          this.$router.push({ name: "person-bagua-my" });
        }
      }
    },
    //举报
    onReportClick() {
      Toast("举报成功");
    },
    //发送消息
    sendMessage() {
      let message = this.message.trim();
      if (message === "") return;
      this.loading_sendMessage = true;
      let postData = {
        cid: this.cid,
        fromUserID: "P",
        toUserID: this.companyID,
        messageText: this.message,
      };
      this.$api.post("/PersonIM/SendMessageByPerson", postData).then((res) => {
        this.loading_sendMessage = false;
        if (res.success) {
          this.onLoad();
          this.$bus.$emit(Global.bus_person_im_sendmessage);
          this.$chathub.sendHubMsg(this.companyID, this.message);
          //jim send message
          // myJmessage.sendMessage(this.companyID, this.message);
          this.message = "";
        } else {
          Toast.fail(res.msg);
        }
      });
    },
    //常用语
    onChangyongyuItemClick(item) {
      this.show_changyongyu = false;
      this.isEdit_changyongyu = false;
      this.message = item;
      this.sendMessage();
    },
    //常用语 编辑
    onChangyongyuItemEditClick(item, index) {
      this.show_changyongyu_edit = true;
      this.changyongyu = item;
      this.index_changyongyu_edit = index;
    },
    onChangyongyuItemDelClick(index) {
      if (this.select_changyongyu_data.length === 1) {
        Toast("至少保留一项");
        return;
      }
      this.select_changyongyu_data.splice(index, 1);
    },
    onChangyongyuSave() {
      let changyongyu = this.changyongyu.trim();
      if (changyongyu === "") {
        Toast("请输入常用语");
        return;
      }
      if (this.index_changyongyu_edit >= 0) {
        //修改
        this.select_changyongyu_data.splice(
          this.index_changyongyu_edit,
          1,
          changyongyu
        );
      } else {
        //新增
        this.select_changyongyu_data.push(changyongyu);
      }
      this.show_changyongyu_edit = false;
      this.changyongyu = "";
      this.index_changyongyu_edit = -1;
    },
    onChangyongyuSend() {
      let changyongyu = this.changyongyu.trim();
      if (changyongyu === "") {
        Toast("请输入常用语");
        return;
      }
      this.onChangyongyuSave();
      this.show_changyongyu_edit = false;
      this.message = changyongyu;
      this.show_changyongyu = false;
      this.sendMessage();
    },
    //发送图片
    sendIMG() {
      //Toast("发送图片");
      this.show_more = false;
      returnToPhoneWithData({
        action: "person_im_sendimg",
        personid: getPersonID(),
        companyid: this.companyid,
      });
    },
  },
};
</script>

<style lang="less">
@import "vant/lib/nav-bar/index.less";
@import "@/assets/css/common.less";

/* 窗口 */
.person-style .note-window {
  position: fixed;
  top: 46px;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
}

/* 窗口 - 防骗 */
.person-style .note-window .caution {
  display: flex;
  align-items: center;
  min-height: 23px;
  padding: 3px 15px;
  background-color: #ff8a8a;
}

.person-style .note-window .caution span {
  display: flex;
  flex: 1;
  margin-right: 4px;
  font-size: 13px;
  color: #fff;
}

/* 窗口 - 对话 */
.person-style .note-window .dialog {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0 15px 20px;
  overflow-y: scroll;
  overflow-x: hidden;
}

.person-style .note-window .dialog .info {
  position: relative;
  display: flex;
  align-items: flex-start;
  margin-top: 20px;
  padding-bottom: 20px;
}

.person-style .note-window .dialog .info .avatar {
  display: flex;
  flex: 0 0 40px;
  height: 40px;
  border-radius: 5px;
  background-color: #fff;
}

.person-style .note-window .dialog .info .bubble {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 22px;
  padding: 9px 10px;
  border-radius: 5px;
}

.person-style .note-window .dialog .info .bubble span {
  font-size: 16px;
  color: #222;
  line-height: 22px;
}

.person-style .note-window .dialog .info .bubble img {
  display: flex;
  max-width: 200px;
  max-height: 200px;
}

.person-style .note-window .dialog .info .sub {
  position: absolute;
  bottom: 0;
  font-size: 12px;
  color: #b8b8b8;
  line-height: 100%;
}

.person-style .note-window .dialog .info .sub span + span {
  margin-left: 12px;
}

.person-style .note-window .dialog .info .sub .no {
  color: #05a6f0;
}

.person-style .note-window .dialog .firm {
  padding-right: 50px;
}

.person-style .note-window .dialog .firm .avatar {
  margin-right: 10px;
}

.person-style .note-window .dialog .firm .bubble {
  background-color: #fff;
}

.person-style .note-window .dialog .firm .bubble::before {
  content: "";
  position: absolute;
  top: 14px;
  left: -5px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 5px solid #fff;
}

.person-style .note-window .dialog .firm .sub {
  left: 55px;
}

.person-style .note-window .dialog .person {
  justify-content: flex-end;
  padding-left: 50px;
}

.person-style .note-window .dialog .person .avatar {
  order: 1;
  margin-left: 10px;
}

.person-style .note-window .dialog .person .bubble {
  background-color: #c9e7ff;
}

.person-style .note-window .dialog .person .bubble::before {
  content: "";
  position: absolute;
  top: 14px;
  right: -5px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid #c9e7ff;
}

.person-style .note-window .dialog .person .annex {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 11px;
  border: 1px solid rgba(5, 166, 240, 0.25);
  border-radius: 8px;
  background: linear-gradient(rgba(5, 166, 240, 0.05), #fff);
  box-shadow: 0px 1px 20px rgba(102, 102, 102, 0.05);
}

.person-style .note-window .dialog .person .annex::before {
  content: "";
  position: absolute;
  top: 15px;
  right: -6px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid rgba(5, 166, 240, 0.25);
}

.person-style .note-window .dialog .person .annex p:nth-child(1) {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 35px;
  padding: 3px 0 2px 43px;
  background: url("@/assets/img/note/annex_ico.png") no-repeat 0 0 / 33px 40px;
}

.person-style .note-window .dialog .person .annex p:nth-child(1) span {
  font-size: 16px;
  color: #333;
  line-height: 1;
}

.person-style .note-window .dialog .person .annex p:nth-child(1) span + span {
  font-size: 12px;
  color: #999;
}

.person-style .note-window .dialog .person .annex p:nth-child(2) {
  display: flex;
  flex-direction: column;
  margin-top: 12px;
}

.person-style .note-window .dialog .person .annex p:nth-child(2) span {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 37px;
  border-radius: 6px;
  background-color: rgba(5, 166, 240, 0.1);
  font-size: 15px;
  color: #05a6f0;
}

.person-style .note-window .dialog .person .sub {
  right: 55px;
}

/* 窗口 - 底部 */
.person-style .note-window .bottom {
  display: flex;
  flex-direction: column;
  background-color: #fff;
}

/* 窗口 - 底部 - 内容输入 */
.person-style .note-window .bottom .input {
  display: flex;
  align-items: flex-end;
  padding: 8px 15px;
}

.person-style .note-window .bottom .input p {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 40px;
}

.person-style .note-window .bottom .input p + p {
  margin-left: 12px;
}

.person-style .note-window .bottom .input p:nth-child(2) {
  flex: 1;
}

.person-style .note-window .bottom .input p i {
  width: 28px;
  height: 28px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 28px;
}

.person-style .note-window .bottom .input p i.icon-useful {
  background-image: url("@/assets/img/useful-icon.png");
}

.person-style .note-window .bottom .input p i.icon-more {
  background-image: url("@/assets/img/more-icon.png");
}

.person-style .note-window .bottom .input p i.icon-cancel {
  background-image: url("@/assets/img/more-icon.png");
  transform: rotate(45deg);
}

.person-style .note-window .bottom .input .textarea {
  display: flex;
  align-items: center;
  flex: 1;
  min-height: 28px;
  padding: 6px 10px;
  border-radius: 6px;
  background-color: #f7f7f7;
  font-size: 16px;
  line-height: 28px;
}

.person-style .note-window .bottom .input .textarea::after {
  display: none;
}

/* 窗口 - 底部 - 更多输入 */
.person-style .note-window .bottom .more {
  display: flex;
  flex-direction: column;
  border-top: 0.5px solid #e8e8e8;
}

.person-style .note-window .bottom .more ul {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 25px 15px;
}

.person-style .note-window .bottom .more li {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.person-style .note-window .bottom .more li img {
  width: 52px;
  height: 52px;
  border: 0.7px solid #e8e8e8;
  border-radius: 8px;
  margin-bottom: 10px;
}

.person-style .note-window .bottom .more li span {
  font-size: 14px;
  color: #666;
  line-height: 100%;
}

/* 窗口 - 底部 - 常用语 */
.person-style .note-window .bottom .useful {
  display: flex;
  flex-direction: column;
  border-top: 0.5px solid #e8e8e8;
}

.person-style .note-window .bottom .useful ul {
  height: 170px;
  padding: 0 15px;
  overflow: hidden auto;
}

.person-style .note-window .bottom .useful li {
  display: flex;
  align-items: center;
  height: 50px;
  border-bottom: 0.5px solid #e8e8e8;
  overflow: hidden;
}

.person-style .note-window .bottom .useful li span {
  display: -webkit-box;
  flex: 1;
  font-size: 15px;
  color: #444;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.person-style .note-window .bottom .useful li i {
  display: block;
  margin-left: 20px;
}

.person-style .note-window .bottom .useful p {
  display: flex;
  padding: 13px 0;
  border-top: 0.5px solid #e8e8e8;
}

.person-style .note-window .bottom .useful p span {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  height: 24px;
  font-size: 15px;
  font-weight: 500;
  color: #05a6f0;
}

.person-style .note-window .bottom .useful p span + span {
  border-left: 0.5px solid #e8e8e8;
}

/* 添加常用语 */
.person-style .note-input-useful-edit {
  display: flex;
  flex-direction: column;
  width: calc(86% - 40px);
  padding: 15px 20px 20px;
  border-radius: 10px;
  background-color: #fff;
}

.person-style .note-input-useful-edit b {
  display: flex;
  align-items: center;
  font-size: 16px;
  color: #333;
}

.person-style .note-input-useful-edit p {
  display: flex;
}

.person-style .note-input-useful-edit .text {
  display: flex;
  align-items: center;
  flex: 1;
  padding: 0;
  margin: 15px 0;
  background-color: #fff;
  font-size: 16px;
}

.person-style .note-input-useful-edit .text::after {
  display: none;
}

.person-style .note-input-useful-edit .btn {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  height: 44px;
  padding: 0;
  border: 0;
  background-color: #f2f2f2;
  font-size: 16px;
  color: #999;
  line-height: 44px;
}

.person-style .note-input-useful-edit .btn + .btn {
  margin-left: 20px;
  background-color: #05a6f0;
  color: #fff;
}
</style>
